<template>
  <div class="hello" v-loading="loading" v-wechat-title="this.title">
       <inline-calendar
        ref="calendar"
        class="inline-calendar-demo"
        :show.sync="show"
        v-model="value"
        start-date="2016-04-01"
        :end-date= now
        :range="range"
        @on-change="date"
       >
      </inline-calendar>

      <group class="tab">
          <popup-picker title="<a class='required'>*</a>部门" :data="list" v-model="cate" @on-change="onChange"></popup-picker>
          <cell title="人数情况" :value="'实到' + sdrs + '/' + ydrs + '人'" ></cell>
          <cell title="正常签到"  is-link @click.native="late(1)">
            <div>
              <a style="color:#333333;">{{zcdk}}</a>人详情
            </div>
          </cell>
          <cell title="正常签退"  is-link @click.native="late(6)">
            <div>
              <a style="color:#333333;">{{zcqt}}</a>人详情
            </div>
          </cell>
          <cell title="迟到"  is-link @click.native="late(2)">
            <div>
              <a style="color:#ff6868;">{{cdrs}}</a>人详情
            </div>
          </cell>
          <cell title="早退"  is-link @click.native="late(3)">
            <div>
              <a style="color:#ff6868;">{{ztrs}}</a>人详情
            </div>
          </cell>
          <cell title="缺卡"  is-link  @click.native="onClick(0)">
            <div>
              <a style="color:#ff6868;">{{qkrs}}</a>人详情
            </div>
          </cell>
          <cell title="请假"  is-link  @click.native="late(4)">
              <div>
                <a style="color:#333333;">{{qjrs}}</a>人详情
              </div>
          </cell>
          <cell title="缺勤"  is-link @click.native="onClick(5)">
            <div>
              <a style="color:#ff6868;">{{qqrs}}</a>人详情
            </div>
          </cell>
          <!-- <cell title="弹性离校" :value="item.txlx + '人详情'" is-link @click.native="onClick1()" v-show="this.$route.query.usertype == 1">
            <div>
              <a style="color:#333333;">{{txlx}}</a>人详情
            </div>
          </cell> -->
      </group>
  </div>
</template>

<script>
import { Cell, Group, Badge,InlineCalendar,PopupPicker,Datetime } from 'vux'
import { dateFormat } from 'vux'
export default {
   components: {
    Group,
    Cell,
    InlineCalendar,
    PopupPicker,
    Datetime
  },
  data () {
    return {
      loading: true,
      sdrs:0,
      ydrs:0,
      zcdk:0,
      zcqt:0,
      cdrs:0,
      ztrs:0,
      qkrs:0,
      qjrs:0,
      qqrs:0,
      txlx:0,
      type: 1, // 1 日常统计 2 月统计
      gradeid:null,
      classid:null,
      array:[],
      arrayc:[],
      item: {},
      now:dateFormat(new Date(), 'YYYY-MM-DD'),
      month:'',
      cate:[],
      room:[],
      list:[],
      list1:[],
      show: true,
      value:localStorage.getItem('tdate') ? localStorage.getItem('tdate') : dateFormat(new Date(), 'YYYY-MM-DD'),
      listValue: '',
      range: true,
      showLastMonth: true,
      showNextMonth: true,
      highlightWeekend: false,
      return6Rows: true,
      hideHeader: false,
      hideWeekList: false,
      replaceTextList: {},
      replace: false,
      changeWeeksList: false,
      weeksList: [],
      useCustomFn: false,
      buildSlotFn: () => '',
      disablePast: false,
      disableFuture: false,
      disableWeekend: false,
      disableDateFunction (date) {
        if (date.formatedDate === '2017-10-16') {
          return true
        }
      },
      school_id: localStorage.getItem('school_id'),
      type_role: localStorage.getItem('type'),
      title: '考勤报表(教师)',
    }
  },
  mounted(){
    this.getgrade();
  },
  methods:{
    getData() {
      let grades = JSON.parse(localStorage.getItem('grades'));
      let aclass = JSON.parse(localStorage.getItem('aclass'));
      this.gradeid = (grades.length != 0) ? grades[0].id : null;
      this.classid = (aclass.length != 0) ? aclass[0].id : null;
      this.getgrade();
    },
    getgrade(){
      let uid = localStorage.getItem('uid')
      this.$axios.post(`${this.GLOBAL.url}/Nhreport/${this.school_id}/bm/${uid}`).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          let arr = [];
          let data = res.data.datas;
          this.array = data;
          data.forEach(item => {
            arr.push(item.name)
          });
          this.list.push(arr);
          this.cate.push(arr[0]);
          this.gradeid = data[0].id;
        }
      });
    },
    getcontent(gradeid,classid,value){
      let data = {}
      data.starttime = this.value
      data.type = parseInt(localStorage.getItem('type'))
      data.tjtype = 1
      data.uypes = 2
      if(gradeid !== null) {
        data.bj = gradeid
      }
      this.$axios.post(`${this.GLOBAL.url}/Nhreport/${this.school_id}/inform`,data).then(res => {
        if (res.data.code === 200) {
          this.loading = false;
          this.item = res.data;
          this.sdrs = res.data.data.sdrs
          this.ydrs = res.data.data.ydrs
          this.zcdk = res.data.data.zcdk
          this.zcqt = res.data.data.zcqt
          this.cdrs = res.data.data.cdrs
          this.ztrs = res.data.data.ztrs
          this.qkrs = res.data.data.qkrs
          this.qjrs = res.data.data.qjrs
          this.qqrs = res.data.data.qqrs
        }
      });
    },
    late(type){
      this.$router.push({path: '/statue/late',query: { type: type,gradeid:this.gradeid,classid:this.classid,time:this.value,utype:this.$parent.demo3,usertype:this.$route.query.usertype,uypes:2}})
    },
    onChange(val){
      this.loading = true;
      let id = ''
      this.array.forEach(function(element) {
          if(val == element.name){
            if(element.id === '0'){
              id = null
            }else {
              id = element.id
            }
          }
      });

      this.gradeid = id;
      this.getcontent(this.gradeid)
    },

    onClick(type){
       this.$router.push({path: '/normal',query: {type: type,gradeid:this.gradeid,classid:this.classid,time:this.value,utype:this.$parent.demo3,usertype:this.$route.query.usertype,uypes:2}})
    },
    onClick1(){
       this.$router.push({path: '/statue/elastic',query:{gradeid:this.gradeid,classid:this.classid,time:this.value,utype:this.$parent.demo3,usertype:this.$route.query.usertype}})
    },
    date (){
        localStorage.setItem('tdate',this.value)
        this.loading = true;

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .hello {
    .vux-prev-icon, .vux-next-icon {
        width: 8px;
        height: 8px;
        top:18px;
        border-color: #009a79;
    }
    .inline-calendar th {
      color: #27b094;
      font-size: 2.666vw;
    }
    .calendar-title {
      color: #1daa8f;
      font-size: 2.666vw;
    }
    .inline-calendar td {
      font-size: 2.666vw;
    }
    .inline-calendar td.current > span.vux-calendar-each-date{
      background-color: #1aab8e;
    }
    .inline-calendar td.is-today, .inline-calendar td.is-today.is-disabled{
      color: #1aab8e;
    }
  }
  .required {
    color: red;
    margin-right: 2.1333vw;
  }
  .tab {
    .weui-cells {
      font-size: 4vw;
    }
  }
</style>

<style scoped>
</style>
